<template>
  <el-container class="muzi">
    <el-header>
      <div class="left-panel">
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input v-model="search.keyword" placeholder="请输入关键字" class="tax-search-name" @blur="onSearch" clearable/>
          <el-button type="primary" icon="el-icon-search" @click="onSearch"/>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-table :data="pager.dataList" border>
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="name" label="文件名称" align="center"/>
        <el-table-column prop="audit" label="状态" align="center" :formatter="formatterAudit"/>
        <el-table-column prop="createdAt" label="导入时间" align="center" :formatter="formatter"/>
        <el-table-column fixed="right" label="操作" width="215" align="center">
          <template #default="scope">
            <el-button type="danger" :disabled="scope.row.audit === '02'" icon="el-icon-delete" circle @click="onDelete(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="operating" :gutter="5">
        <el-col :span="6" class="pager">
          <el-pagination layout="prev, pager, next" :total="pager.total"/>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import dayjs from "dayjs";

/**
 * 历史导入记录
 *
 * @author Yufe
 * @version 1.0
 */
export default {
  name: '项目资料',
  data() {
    return {
      show: {
        batch: false
      },
      total: 0,
      dataList: [],
      search: {
        keyword: ''
      },
      operating: {
        loading: false
      },
      pager: {
        total: 0,
        dataList: [],
        clean: function () {
          this.total = 0;
          this.dataList.length = 0;
        },
        fill: function ({total, dataList}) {
          this.total = total;
          this.dataList = dataList;
        }
      }
    }
  },
  mounted() {
    this.onSearch();
  },
  computed: {},
  methods: {
    onSearch(number = 1) {
      this.$API.salary.import.pager.get({number}).then(res => {
        if (res.success) {
          this.pager.fill(res.data)
        }
      })
    },
    onDelete(row) {
      console.info('删除导入记录');
      this.$API.salary.import.detail.delete(row.hash).then(res => {
        if (res.success) this.onSearch()
      })
    },
    formatterAudit(row, column, cell) {
      // 审核状态：未审核（01）、已审核（02）、已发放（03）
      switch (cell) {
        case '01':
          return '待审核';
        case '02':
          return '已审核';
        case '03':
          return '已发放';
        default:
          return '-'
      }
    },
    formatter(row, column, value) {
      if (value) return dayjs(value).format('YYYY-MM-DD HH:MM:ss')
      return "-";
    }
  }
}
</script>

<style lang="less" scoped>
.muzi {
  .left-panel {
    .export-btn {
      margin-left: 5px;
    }
  }

  .right-panel {
    .tax-search-name {
      width: 245px;
    }
  }

  .el-main {
    padding: 3px;
  }

  .operating {
    padding: 15px 10px;

    .el-button--large {
      width: 50%;
    }
  }
}
</style>
